import ReactDOM from 'react-dom'
import React, { Component } from 'react'

// 导入兄弟组件
import Jack from './Jack'
import Rose from './Rose'
// 根组件
class App extends Component {
  // 状态提升:由最近的父组件来管理状态和修改状态的函数,子组件通过props使用完成兄弟组件之间的通讯
  // 状态
  state = {
    msg: ''
  }
  updatedMsg = (msg) => {
    this.setState({ msg })
  }
  render() {
    return (
      <div>
        {/* jack传递数据给rose */}
        <Jack updateMsg={this.updatedMsg} />
        <Rose msg={this.state.msg} />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))